<div
  [class.text-muted]="(connected$ | async) === false"
  class="flex flex-col gap-y-4"
>
  <!-- Queue header with track info and cover -->
  <app-queue-header></app-queue-header>

  <mat-divider></mat-divider>

  <!-- Control panel -->
  <div class="flex flex-col md:flex-row justify-between gap-y-4">
    <app-control-panel class="flex-grow"></app-control-panel>
    <app-mpd-modes></app-mpd-modes>
  </div>

  <!-- Current track progress -->
  <app-track-progress></app-track-progress>

  <mat-divider></mat-divider>

  <!-- Volume slider -->
  <app-volume-slider></app-volume-slider>

  <mat-divider></mat-divider>

  <!-- Track table -->
  <app-track-table></app-track-table>
</div>
